<template>
    <div class="detail-container">
        <div>
            <el-steps :active="formatStepStatus(order.billStatus)" finish-status="success" align-center>
                <el-step title="订单生成" :description="formatTime(order.submitTime)"></el-step>
                <el-step title="完成支付" :description="formatTime(order.paymentTime)"></el-step>
                <el-step title="完成发货" :description="formatTime(order.deliveryTime)"></el-step>
                <el-step title="成功收货" :description="formatTime(order.confirmTime)"></el-step>
                <el-step title="完成评价" :description="formatTime(order.commentedTime)"></el-step>
            </el-steps>
        </div>
        <el-card shadow="never" style="margin-top: 15px">
            <div class="operate-container">
                <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
                <span class="color-danger">当前订单状态：{{order.Status}}</span>
            </div>
            <div style="margin-top: 20px">
                <i class="el-icon-user-solid" style="color: #606266"></i>
                <span class="font-small">收货人信息</span>
                <el-button v-if="order.billStatus === 1" size="medium" @click="showUpdateReceiverDialog">修改收货信息</el-button>
            </div>
            <div class="table-layout">
                <el-row>
                    <el-col :span="8" class="table-cell-title">收货人</el-col>
                    <el-col :span="8" class="table-cell-title">手机号码</el-col>
                    <el-col :span="8" class="table-cell-title">收货地址</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" class="table-cell">{{order.consignee}}</el-col>
                    <el-col :span="8" class="table-cell">{{order.teleNumber}}</el-col>
                    <el-col :span="8" class="table-cell">{{order.address}}</el-col>
                </el-row>
            </div>
            <div style="margin-top: 20px">
                <i class="el-icon-s-order" style="color: #606266"></i>
                <span class="font-small">商品信息</span>
            </div>
            <el-table
                ref="orderItemTable"
                :data="commodityList1"
                style="width: 100%;margin-top: 20px" border>
                <el-table-column label="商品图片" width="120" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.url" style="height: 80px">
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" align="center" prop="commodityName">
                </el-table-column>
                <el-table-column label="价格/货号" width="120" align="center">
                    <template slot-scope="scope">
                        <p>价格：￥{{scope.row.price}}</p>
                        <p>货号：{{scope.row.orderNumber}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="商品概述" width="120" align="center" prop="commoditydescribe">
                </el-table-column>
                <el-table-column label="数量" width="120" align="center" prop="number">
                </el-table-column>
                <el-table-column label="小计" width="120" align="center">
                    <template slot-scope="scope">
                        ￥{{scope.row.price * scope.row.number}}
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog title="修改收货人信息"
            :visible.sync="receiverDialogVisible"
            width="40%">
            <el-form :model="receiverInfo"
                ref="receiverInfoForm"
                label-width="150px">
                <el-form-item label="收货人姓名：">
                    <el-input v-model="receiverInfo.consignee" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：">
                    <el-input v-model="receiverInfo.teleNumber" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="所在区域：">
                    <v-distpicker :province="receiverInfo.address_province"
                        :city="receiverInfo.address_city"
                        :area="receiverInfo.address_county"
                        @selected="onSelectRegion"></v-distpicker>
                </el-form-item>
                <el-form-item label="详细地址：">
                    <el-input v-model="receiverInfo.address_location" type="textarea" rows="3"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="receiverDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { formatDate } from '@/common/date'
    import VDistpicker from 'v-distpicker'
    export default {
        components: { VDistpicker },
        data () {
            return {
                order: {
                },
                statusMap: {
                    1: '等待支付',
                    2: '等待发货',
                    3: '等待收货',
                    4: '等待评价',
                    5: '完成评价',
                    6: '已取消'
                },
                userInfo: {},
                receiverDialogVisible: false,
                receiverInfo: {
                    consignee: '',
                    teleNumber: '',
                    address_province: '',
                    address_city: '',
                    address_county: '',
                    address_location: ''
                },
                commodityList: {
                },
                commodityList1: []
            }
        },
        created () {
            this.userInfo = JSON.parse(sessionStorage.getItem('user'))
            this.getCommodityByorderNumber()
            this.getorderinfo()
        },
        methods: {
            async getPicture (commodity) {
                this.$http.get('/image', { params: { 'imageName': commodity.picture_name }, responseType: 'blob' }).then(res => {
                    const blob = new Blob([res.data])
                    const url = window.URL.createObjectURL(blob)
                    this.url = url
                    this.$set(commodity, 'url', url)
                    this.commodityList1.push(commodity)
                })
            },
            async getCommodityByorderNumber () {
                this.$http.get('/bill/getCommodities/', { params: { 'order_number': this.$route.query.orderid } }).then(res => {
                    console.log(111)
                    console.log(this.$route.query.orderid)
                    console.log(res)
                    this.commodityList = res.data.data
                    this.commodityList.forEach(element => {
                        this.getPicture(element)
                    })
                })
            },
            async getorderinfo () {
                this.$http.get('/bill/getByOrderNumber/', { params: { order_number: this.$route.query.orderid } }).then(res => {
                    this.order = res.data.data
                    this.$set(this.order, 'Status', this.statusMap[this.order.billStatus])
                    this.$set(this.order, 'address', this.formatAddress(this.order))
                })
            },
            formatAddress (order) {
                let str = order.address_province
                if (order.receiverCity != null) {
                    str += ' ' + order.address_city
                }
                str += ' ' + order.address_county
                str += ' ' + order.address_location
                return str
            },
            formatStepStatus (value) {
                if (value === 1) {
                    // 待发货
                    return 1
                } else if (value === 2) {
                    // 已发货
                    return 2
                } else if (value === 3) {
                    // 已完成
                    return 3
                } else if (value === 4) {
                    // 待付款、已关闭、无限订单
                    return 4
                } else {
                    return 5
                }
            },
            onSelectRegion (data) {
                this.receiverInfo.address_province = data.province.value
                this.receiverInfo.address_city = data.city.value
                this.receiverInfo.address_county = data.area.value
            },
            formatTime (time) {
                if (time === null || time === '') {
                    return ''
                }
                const date = new Date(time)
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
            showUpdateReceiverDialog () {
                this.receiverInfo = {
                    consignee: this.order.consignee,
                    teleNumber: this.order.teleNumber,
                    address_province: this.order.address_province,
                    address_city: this.order.address_city,
                    address_county: this.order.address_county,
                    address_location: this.order.address_location

                }
                this.receiverDialogVisible = true
            },
            handleUpdateReceiverInfo () {

            }
        }
    }
</script>
<style scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>
